<template>
  <div class="newpage">
      <div class="pro_img">
        <el-row :gutter="20">
            <router-link to="/sub/one" style="display:block;width:100%">
            <el-col :span="6">
                <div class="grid-content bg-purple">
                    <img src="http://s.amazeui.org/media/i/demos/bing-1.jpg">
                </div>
            </el-col>
            </router-link>

            <router-link to="/sub/two" style="display:block;width:100%">
            <el-col :span="6">
                <div class="grid-content bg-purple">
                    <img src="http://s.amazeui.org/media/i/demos/bing-2.jpg">
                </div>
            </el-col>
            </router-link>
            <router-link to="/sub/three" style="display:block;width:100%">
            <el-col :span="6">
                <div class="grid-content bg-purple">
                    <img src="http://s.amazeui.org/media/i/demos/bing-3.jpg">
                </div>
            </el-col>
            </router-link>
            <router-link to="/sub/one" style="display:block;width:100%">
            <el-col :span="6">
                <div class="grid-content bg-purple">
                    <img src="http://s.amazeui.org/media/i/demos/bing-4.jpg">
                </div>
            </el-col>
            </router-link>
        </el-row>
    </div>
      <router-view></router-view>
  </div>
</template>

<script>
import one from '../components/new/one.vue'
import two from '../components/new/two.vue'
import three from '../components/new/three.vue'
export default {
  data(){
      return{

      }
  },
  components:{ one, two, three}
}
</script>

<style scoped>
.main{
    max-width: 1200px;
    margin: 0 auto;
    overflow: hidden;
}
.pro_desc{
    margin: 20px 0;
}
.bg-purple img{
    width: 100%;
}
.pro_img{
    margin: 20px 0;
}
.pro_name{
    height: 30px;
    line-height: 30px;
}
.pro_price{
    height: 30px;
    line-height: 30px
}
.pro_price span{
    color: #ff0000;
}

.ask{
    margin: 10px 0;
}
.el-row {
    margin-bottom: 20px;
    &:last-child {
        margin-bottom: 0;
    }
}

.el-col {
    border-radius: 4px;
}

.bg-purple-dark {
    background: #99a9bf;
}

.bg-purple {
    background: #d3dce6;
}

.bg-purple-light {
    background: #e5e9f2;
}

.grid-content {
    border-radius: 4px;
    min-height: 36px;
}

.row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
}
</style>
